<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <title>Pizza</title>
  <link rel="stylesheet" href="../pizza/css/ui.css?_t=1510195133000">
</head>
<body class="pz-contain">
<h2>弹窗</h2>
<hr class="fn-mt10">
<div class="pz-boxhead fn-mt20">
  <em class="icon pz-icon icon-manageorder"></em>
  <span class="title">弹窗</span>
</div>
<div class="pz-boxbody fn-pd15">
  <h3>弹窗内容</h3>
  <hr class="fn-mt10">
  <div id="j-overlay-content" class="fn-mt10">
    <div class="pz-boxhead fn-w600">
      <em class="icon pz-icon icon-warning"></em>
      <span class="title">Overlay弹窗</span>
      <span class="close j-overlay-close">
        <em class="pz-icon icon-close"></em>
      </span>
    </div>
    <div class="pz-boxbody fn-w600">
      <div class="pz-form">
        <div class="wrap fn-pd30 fn-fs16">
          这是一个普通的弹窗框！
        </div>
        <div class="actions fn-pd10 fn-textright">
          <input type="button" class="pz-btn btn-success j-overlay-close" value="确定">
        </div>
      </div>
    </div>
  </div>
  <h3 class="fn-mt20">点击弹窗</h3>
  <hr class="fn-mt10">
  <div class="fn-mt10">
    <span id="j-overlay-show" class="pz-btn btn-primary">Click Me</span>
  </div>
</div>
<script type="text/javascript" src="//static.xinhuaapp.com/js/jquery-1.11.0-min.js"></script>
<script>
$('#j-overlay-show').click(function(){
  new parent.pizzaCmd.overlay($('#j-overlay-content').html(), function (newThis) {
    newThis.show();
    newThis.obj.find('.j-overlay-close').click(function(){
      newThis.remove();
    });
  });
});
</script>
</body>
</html>